<template>
	<view class="seller pr">
		<!-- 顶部导航栏 -->
        <view class="nav">
        	<u-navbar :is-back="false" title="商家" z-index="90"></u-navbar>
        </view>
		<view  :class="isSticky == true? 'sticky': 'search tc'" 
               :style="{background:search_bg, top: top}">
		    <search :search="search" :input_bg="search.input_bg"></search>
		</view>
		<view class="seller_content">
			<!-- 轮播图 -->
			<view class="banner">
				<banner-list :banners="banners" swiperHeight= "238rpx"  background="#FF504C" :heightFix="true"></banner-list>
			</view>
			<!-- 分类导航栏 -->
			<view class="tab pr">
				<!-- 左边的导航栏 -->
				<view class="left">
					<yunmiao-jobSelect ref="jobSelect" :selectValue="selectValue"  :listData="listData" @swichMenu="confiremJob"></yunmiao-jobSelect>
				</view>
				<!-- 右边的导航栏和商家列表 -->
				<view class="rigth">
					<v-tabs name="cate_name" gutter="20" color="#eee" count="cate_count" :list="category_a" :img="img"
						active-color="#000" :is-scroll="true" :current="current" @change="changeTabs"></v-tabs>
					<!-- 商家列表 -->
					<view class="seller_list" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
						<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
						<seller-list :sellers_data="seller_list" :labelName='name' @jumpDetail="jumpDetail"></seller-list>
						<view class="getMore" @click="getMore" v-if="seller_list.length > 6">
							<tap-more :isLoad="isLoad" :isNone="isNone" :isName="isName"></tap-more>
						</view>
						<empty :null_data="null_data" v-if="!seller_list.length"></empty>
					</view>
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import search from '../index/components/search.vue'
	export default {
		components: {
			search
		},
		data() {
			return {
				search_bg: '',                                  // 搜索框背景色
				isSticky: false,                                // 是否开启固定位置信息
				search: {                                       // 搜索框组件属性
					logo: this.imgUrl + 'red-logo.png',
					search: this.imgUrl + 'search.png',
					input_bg: '#EDEDED'
				},
				selectValue: 0,		                            // 选择的左边分类的当前选中项下标	
				list_name: "全部",                              // 选择的左边分类的名称
				list_nameb: "",		                            // 选择右边分类的名称
				current: 0,			                            // 右边分类的当前选中项下标	
				searchUrl: '/pages/search/index',	            // 搜索页面路径
				detailUrl: '/pages/store/detail/detail'	,       // 商家详情页面路径
				obj: {                                          // 构造请求参数信息
					page: 1,
					pagesize: 10,
					category_id: null,
					orderby_type: "ssss",
					orderby: 'desc',
					lat: 24.881627,
					lng: 118.628881,
				},
				categoryId: {},                                    // 商店id
				isName: false,                                     // 是否加载完成
				isLoad: false,                                     // 是否开启load状态
				isNone: false,                                	   // 是否开启load文字描述
				seller_list: [],                            	   // 店铺列表
				null_data: {                                 	   // 空状态
				 null_img: this.imgUrl + 'nosellers.png',
				 text: '暂无商家~'
				},
				startY: 0,											// 保存 y轴点的位置
				loadShowHeight: 0,									// 下拉刷新
				scrollTop: 0,										// 下拉刷新
				loadMinHeight: 0,
				loadMsg: '',										// 下拉刷新提示
				freshFlag: false,									// 下拉刷新
				show_top: false, 									// 回到顶部按钮显示
                top: null,       									// 位置
			}
		},
        computed: {
        	...mapState({
                hight: state => state.init.scrollTop,               // 滚动高度
        		listData: state => state.sellers.category,			// 左边导航栏标签
        		category_a: state => state.sellers.category_a,      // 右边导航栏标签
        		banners: state => state.init.banners, 				// 轮播图
        		Location: state => state.user.Location, 			// 经纬度
                menuButtonInfo: state => state.init.menuButtonInfo, // 微信小程序胶囊信息
                systemInfo: state => state.init.systemInfo          // 设备信息
        	})
        },
        watch: {
        	// 监听滚动高度
        	hight(newVal, oldVal) {
        		if (newVal > 100) {
        			this.search_bg = "#FFF"
        			this.isSticky = true;
					this.show_top = true;
        		} else {
        			this.search_bg = '';
					this.show_top = false;
        			this.isSticky = false;
        		}
        	}
        },
        mounted() {
            // 将经纬度转成number类型
			this.obj.lat = Number(this.Location.latitude) 
			this.obj.lng = Number(this.Location.longitude)
			this.getApi();
            //  计算固定搜索栏至顶部位置高度
            this.top = this.menuButtonInfo.top + this.systemInfo.statusBarHeight + 11 + 'px';
        },
		methods: {
            // 拖动开始
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
            // 拖动中
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
            // 拖动完成
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
            // 下拉刷新
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
            // 分页店铺查询
			getApi() {
				this.$api('shoppage',this.obj).then( res => {
					this.seller_list = res.data.data
				})
			},
			// 加载更多
			getMore() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.obj.page++
					this.$api('shoppage',this.obj).then( res => {
						this.seller_list = [...this.seller_list,...res.data.data]
						if(!res.data.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
            // 路由跳转
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
			
			//跳转商家详情页面
			jumpDetail(item) {
				let detail = '/pages/store/detail/detail'
				this.$Router.push({
					path: detail,
				})
				this.$store.dispatch('sellers/get_shopId', item.id)
			},
			//切换右边导航栏触发事件
			changeTabs(index) {
                if (this.current == index) return;
				this.current = index;
				this.list_name = this.category_a[index].cate_name;
				this.category_a[index].selected = !this.category_a[index].selected;
                switch (index) {
                    case 0:
                        this.obj.orderby_type = 'ssss'
                        break;
                    case 1:
                        this.obj.orderby_type = "praise"
                        break;
                    case 2:
                        this.obj.orderby_type = "number"
                        break;
                    case 3:
                        this.obj.orderby_type = "distance"
                        this.obj.orderby = "asc"
                        break;
                }
                this.getApi();
			},
            // 切换店铺分类
			confiremJob(index,item) {
				this.obj.page = 1
				this.obj.category_id = item.id
				this.getApi();
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './seller.scss';
</style>
<style>
	page {
		background: #FFFFFF;
	}
</style>